/*
@author: stanfor
@date: 2022/8/6 12:14
@Version: 1.0
@last modify time : 2022/8/6 12:14
*/

import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Spin, message } from 'antd';
import logo from '@P/images/logo.png';
import CopyrightStatement from '@C/CopyrightStatement';
import './index.less';

/** EnterAnimation(进场动画)组件说明
* @author: JasonStandFor
* @description Desc:: 进场动画, 目前使用纯函数, 暂不接受任何参数导入
* @return EnterAnimation
* @example:
<EnterAnimation />
**/
const Index = () => {
  const [isGradient, setIsGradient] = useState(false);
  const H = useHistory();

  useEffect(() => {
    const isLogin = JSON.parse(window.sessionStorage.getItem('isLogin'));
    let gradientTimer = null;
    let transitionTimer = null;
    clearTimeout(gradientTimer);
    clearTimeout(transitionTimer);

    gradientTimer = setTimeout(() => {
      if (isLogin) {
        message.success('欢迎进入 Sass-Admin!');
        H.push('/dashboard');
      } else {
        window.sessionStorage.setItem('isLogin', true);
        // TODO: 第一次登录需要强制更新页面
        window.location.reload();
      }
      clearTimeout(gradientTimer);
    }, 2000);

    transitionTimer = setTimeout(() => {
      setIsGradient(true);
      clearTimeout(transitionTimer);
    }, 1500);

    return () => {
      clearTimeout(gradientTimer);
      clearTimeout(transitionTimer);
    }
  }, []);

  return (
    <div className="common-component-enter-animation">
      <div className="common-component-enter-animation-warp">
        <div className="common-component-enter-animation-title">
          <img src={logo} alt="加载失败..."/>
          <h1>Sass-Admin</h1>
          <p>这是一段很长很长很长很长很长的描述...</p>

          <div
            className={`common-component-enter-animation-spin ${isGradient ? 'enter-action-show' : ''}`}
          >
            <Spin tip="Loading..." size="large" />
          </div>
        </div>
      </div>

      <CopyrightStatement isForceCenter />
    </div>
  );
};

export default Index;
